<template>
  <div class="main-area-box">
    <!--  <div class="pointer dialog-btn height-32 pad-l-4 pad-r-4"
      :class="warehouseType === 0? 'dialog-active-btn' :'dialog-disactive-btn'" :style="{left: left+'px', top: '15vh'}"
      @click.stop="addToStore" v-text="warehouseType === 0 ? '添加到仓库' : '已添加到仓库'">
    </div> -->
    <div class="dialog-detail">
      <el-dialog :visible.sync="dialogGoodsInfo" width="68%" style="height:792px" @close="close"
        :close-on-click-modal="true">
        <div class="up-area-box">
          <!-- 左侧图片区域 -->
          <el-row>
            <el-col :span="9">
              <div>
                <img class="width-350 height-350" :src="entity.picUrl" alt="" />
              </div>
              <div class="scroll-img-box">
                <template v-if="imageList.length > 1">
                  <el-carousel :interval="5000" arrow="always" :autoplay="false" height="64" indicator-position="none">
                    <el-carousel-item v-for="(item, index) in imageList" :key="index">
                      <div class="swiper-item-img">
                        <img v-for="(subitem, subindex) in item" :key="subindex" :src="subitem.imageUrl"
                          :class="entity.picUrl === item.imageUrl ? 'mouse-selected' : ''"
                          @mouseenter="mousePicEnter(item)" alt="" />
                      </div>
                    </el-carousel-item>
                  </el-carousel>
                </template>
                <template v-else>
                  <div class="swiper-item-img">
                    <img v-for="(item, index) in imageList[0]" :key="index" :src="item.imageUrl"
                      :class="entity.picUrl === item.imageUrl ? 'mouse-selected' : ''" @mouseenter="mousePicEnter(item)"
                      alt="" />
                  </div>
                </template>
              </div>
              <div class="mar-t-30"
                v-if="entity.supplyAllianceCategoryName != null && entity.supplyAllianceCategoryName != ''">建议分类
                {{entity.supplyAllianceCategoryName}}
              </div>
            </el-col>
            <el-col :span="15">
              <div class="area-right">
                <div class="font-20 line-2 font-white">{{ entity.title }}</div>
                <div class="supply-price font-14 flex">
                  <div class="flex-col">
                    <span class="mar-r-20">利润率</span>
                    <span class="mar-r-20 mar-t-15">{{entity.supplyAllianceSellPriceTypeName}}</span>
                    <span class="mar-r-20 mar-t-15">{{entity.supplyAllianceWholesalePriceTypeName || '建议批发价'}}</span>
                    <span class="mar-r-20 mar-t-15">供货价</span>
                    <!-- <span class="mar-r-20 mar-t-15">淘宝零售价</span> -->
                  </div>
                  <div style="margin-left:35px">
                    <div>
                      <span class="font-white  font-w">{{ entity.supplyAllianceProfitMargin }}%</span>
                      <span
                        v-if="entity.maxSupplyAllianceProfitMargin && entity.supplyAllianceProfitMargin != entity.maxSupplyAllianceProfitMargin"
                        class="font-white  font-w"> ~
                        {{ entity.maxSupplyAllianceProfitMargin }}%</span>
                    </div>
                    <div class="mar-t-15">
                      <span class="font-white  font-w">￥{{ entity.supplyAllianceSellMinPrice }}</span>
                      <span
                        v-if="entity.supplyAllianceSellMaxPrice && entity.supplyAllianceSellMinPrice != entity.supplyAllianceSellMaxPrice"
                        class="font-white  font-w"> ~
                        ￥{{ entity.supplyAllianceSellMaxPrice }}</span>
                    </div>
                    <div class="mar-t-15">
                      <div v-if="entity.supplyAllianceIsEnableWholesaleModel === 1">
                        <span class="font-white  font-w">￥{{ entity.supplyAllianceMinWholesalePrice }}</span>
                        <span
                          v-if="entity.supplyAllianceMaxWholesalePrice && entity.supplyAllianceMinWholesalePrice != entity.supplyAllianceMaxWholesalePrice"
                          class="font-white  font-w"> ~
                          ￥{{ entity.supplyAllianceMaxWholesalePrice }}</span>
                      </div>
                      <div v-else>
                        未设置
                      </div>
                    </div>
                    <div class="mar-t-15">
                      <span class="font-white  font-w">￥{{ entity.supplyAlliancePrice }}</span>
                      <span
                        v-if="entity.supplyAllianceMaxPrice && entity.supplyAlliancePrice != entity.supplyAllianceMaxPrice"
                        class="font-white  font-w"> ~
                        ￥{{ entity.supplyAllianceMaxPrice }}</span>
                    </div>
                    <!-- <template v-if="entity.minMarketPrice">
                      <div class="mar-t-15">
                        <span class="font-white  font-w">￥{{ entity.minMarketPrice }}</span>
                        <template v-if="entity.maxMarketPrice">
                          <span class="font-white  font-w"> ~ ￥{{entity.maxMarketPrice}} </span>
                        </template>
                      </div>
                    </template> -->
                  </div>
                </div>
                <div class="other-info-box flex-col">
                  <div>
                    <span>库存&nbsp;&nbsp;<span>{{ entity.stock }}</span></span>
                    <span style="color:#E5E5E5">|</span>
                    <span>销量&nbsp;&nbsp;<span>{{ entity.salesNum}}</span></span>
                  </div>
                </div>
                <div class="font-20 font-white">商品推介</div>
                <div class="font-white mar-t-10">{{entity.supplyAllianceDescribe}}</div>
                <!-- 商品规格表格 162 117 172-->
                <div class="goods-info-box  mar-t-10" v-if="skuList != null && skuList.length > 0">
                  <div class="goods-img-box">
                    <el-table :data="skuList" :stripe="false" :highlight-current-row="false">
                      <el-table-column label="规格" prop="skuDetail"></el-table-column>
                      <!-- <el-table-column label="图片" width="138">
                        <template slot-scope="scope">
                          
                        </template>
                      </el-table-column> -->
                      <el-table-column label="供货价" prop="supplyAlliancePrice">
                        <template slot-scope="scope">
                          ￥{{scope.row.supplyAlliancePrice}}
                        </template>
                      </el-table-column>
                      <el-table-column label="建议零售价" prop="supplyAllianceSellMinPrice">
                        <template slot-scope="scope">
                          ￥{{scope.row.supplyAllianceSellMinPrice}}
                          <span
                            v-if="scope.row.supplyAllianceSellMaxPrice && scope.row.supplyAllianceSellMinPrice != scope.row.supplyAllianceSellMaxPrice">
                            ~ ￥{{ scope.row.supplyAllianceSellMaxPrice }}</span>
                          <div>{{entity.supplyAllianceSellPriceTypeName}}</div>
                        </template>
                      </el-table-column>
                      <el-table-column label="建议批发价" prop="supplyAllianceMinWholesalePrice">
                        <template slot-scope="scope">
                          <div v-if="entity.supplyAllianceIsEnableWholesaleModel === 1">
                            <div>￥{{scope.row.supplyAllianceMinWholesalePrice}}
                              <span
                                v-if="scope.row.supplyAllianceMaxWholesalePrice && scope.row.supplyAllianceMinWholesalePrice != scope.row.supplyAllianceMaxWholesalePrice">
                                ~ ￥{{ scope.row.supplyAllianceMaxWholesalePrice }}</span>
                              <div>{{entity.supplyAllianceWholesalePriceTypeName}}</div>
                            </div>
                          </div>
                          <div v-else>
                            未设置
                          </div>
                        </template>
                      </el-table-column>

                      <el-table-column label="库存" prop="quantity">
                        <template slot-scope="scope">
                          {{scope.row.stock}}件
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
                <div class="add-btn-box mar-t-30" style="text-align: center;">
                  <el-button type="danger" style="background: #ff5a00;" @click.stop="addToStore"
                    v-if="supplyAllianceIsJoinSelectionStatus === 0" :loading="isAddToStoreLoading">添加到仓库</el-button>
                  <span style="color:#ff5a00;margin-right: 30px;"
                    v-if="supplyAllianceIsJoinSelectionStatus === 1">已添加到仓库</span>
                  <el-button style="color: #ff5a00; border: 1px solid #ff5a00;" @click="close">返回</el-button>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-divider></el-divider>
        <div class="down-area-box" style="margin-top: 20px">
          <div class="goods-img-box">
            <div v-for="(item,index) in entity.details" :key="index">
              <template v-if="item.type === 'image'">
                <img :src="item.src" style="width: 100%;" />
              </template>
              <template v-if="item.type === 'text'">
                <div v-html="item.text"></div>
              </template>
            </div>
            <!-- <div v-html="entity.description"></div> -->
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {
    getSupplyAllianceGoodsInfo
  } from '@/api/goods/supplyAlliance'

  export default {
    props: {
      goodsId: {
        type: String,
        default: ''
      },
      supplyAllianceIsJoinSelectionStatus: {
        type: Number,
        default: 0
      },
      isAddToStoreLoading: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        entity: {
          supplyAllianceIsJoinSelectionStatus: 1
        },
        imageList: [],
        skuList: [],
        enCategoryList: [],
        enCategoryIds: [],
        dialogVisible: false,
        tabsVal: '1',
        initIndex: 0,
        temp: [],
        dialogGoodsInfo: true,
        devW: '',
        left: ''
      }
    },
    // 初始化页面
    created() {
      this.getDetail()
    },
    mounted() {
      const that = this
      this.devW = document.documentElement.clientWidth
      this.left = (this.devW - 760) / 2 + 780
      window.onresize = () => {
        that.devW = document.documentElement.clientWidth
        that.left = (that.devW - 760) / 2 + 780
      }
    },
    methods: {
      close() {
        this.$emit('closeGoodsDeatil')
      },
      // 图片鼠标移入事件
      mousePicEnter(item) {
        if (item) {
          this.entity.picUrl = item.imageUrl
        }
      },
      closeWindow() {
        window.close()
      },
      addToStore() {
        if (this.entity.supplyAllianceIsJoinSelectionStatus === 1) return
        this.$emit('addToStore', this.entity)
      },
      getDetail() {
        getSupplyAllianceGoodsInfo(this.goodsId, this.getEnterpriseId()).then((response) => {
          if (response.isError) return
          Object.assign(this.entity, response.data)
          this.$set(this.entity, 'supplyAllianceIsJoinSelectionStatus', response.data
            .supplyAllianceIsJoinSelectionStatus)
          this.skuList = response.data.skuList
          for (let i = 0; i < response.data.goodsImages.length; i++) {
            if (i % 5 === 0) {
              this.initIndex = parseInt(i / 5)
              this.imageList[this.initIndex] = []
            }
            this.imageList[this.initIndex].push(response.data.goodsImages[i])
          }
          if (this.imageList.length > 1) {
            this.mousePicEnter(this.imageList[0])
          } else {
            this.mousePicEnter(this.imageList[0][0])
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .main-area-box {
    width: 100%;
    height: 100%;
    background: #f7f9fb;
    padding: 10px;
    position: relative;

    .dialog-btn {
      position: fixed;
      z-index: 999999;
      color: #fff;
      text-align: center;
      line-height: 32px;
      border-radius: 4px;
    }

    .dialog-active-btn {
      background: #FF6427;
    }

    .dialog-disactive-btn {
      background: #2B2B2E;
    }

    .dialog-detail {
      /deep/ .el-dialog__wrapper {
        overflow: hidden
      }

      /deep/ .el-dialog {
        height: 796px;
        overflow-y: auto;
        padding: 30px;
        background: #2B2B2E;
      }

      /deep/ .el-dialog::-webkit-scrollbar {
        display: none;
      }

      /deep/ .el-dialog__header {
        padding: 0;
      }

      /deep/ .el-dialog__body {
        margin-bottom: 30px;
        color: #999999;
      }
    }

    .up-area-box {
      .goods-title {
        font-size: 20px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.5);
        line-height: 30px;
      }

      .other-info-box {
        font-size: 14px;
        padding-top: 20px;
        padding-bottom: 20px;

        &>div>span:nth-child(2) {
          color: #fff;
          margin-left: 6px;
          margin-right: 6px;
        }
      }

      .area-right {
        position: relative;

        .scroll-img-box {
          position: absolute;
          bottom: 0;
        }
      }

      .goods-table-info {
        /deep/ .el-table__row {
          font-size: 14px;
          color: rgba(255, 255, 255, 0.5);

          img {
            width: 40px;
            height: 40px;
          }
        }

        /deep/ .is-leaf {
          border: none;
          background: #fff;
          color: rgba(255, 255, 255, 0.5);
          font-weight: 400;
          font-size: 14px;
        }
      }

      .btn-group-box {
        display: flex;
        padding-top: 57px;
        padding-bottom: 30px;

        &>span {
          width: 162px;
          height: 40px;
          line-height: 40px;
          font-size: 16px;
          border-radius: 4px;
          text-align: center;
        }

        .addBtn {
          color: #fff;
          background: #ff5a00;
          margin-left: 152px;
        }

        .backBtn {
          color: #ff5a00;
          background: #fff2ee;
          margin-left: 14px;
        }
      }

      /deep/ .el-carousel__container {
        width: 360px;
        height: 64px;

        & .el-carousel__item {
          height: 64px;
        }

        .swiper-item-img {
          width: 360px;
          display: flex;
          justify-content: flex-start;

          img {
            width: 64px;
            height: 64px;
            margin-left: 10px;
          }

          &>img:nth-child(1) {
            margin-left: 0;
          }
        }
      }

      .swiper-item-img {
        width: 360px;
        display: flex;
        justify-content: flex-start;

        img {
          width: 64px;
          height: 64px;
          margin-left: 10px;
        }

        &>img:nth-child(1) {
          margin-left: 0;
        }
      }
    }

    .down-area-box {
      background: #252529;
      margin-bottom: 100px;

      /deep/ .el-table__empty-block {
        background: #252529;
      }

      /deep/ .el-tabs--card {
        .el-tabs__header {
          border: none;
          margin: 0;

          .el-tabs__item {
            border-left: none !important;
          }
        }

        .el-tabs__content {
          padding: 20px 15px;
          background: #252529;
        }
      }

      /deep/ .el-tabs__nav-scroll {
        .el-tabs__nav {
          border: none;
          display: flex;
          width: 100%;
          background: #2B2B2E;
          border-radius: 0px;

          .is-active {
            border-top: 2px solid #ff5a00;
            color: #fff;
            background: #252529;
            border-bottom-color: #252529 !important;
            border-left: 1px solid rgba(245, 245, 245, 0.5) !important;
            border-right: 1px solid rgba(245, 245, 245, 0.5) !important
          }

          .el-tabs__item {
            flex: 1;
            margin-right: 0 !important;
            color: #fff;
            border-bottom: 1px solid rgba(245, 245, 245, 0.5);
          }
        }
      }

      .goods-recomment-area {
        width: 30%;
        font-size: 16px;
        line-height: 30px;
        color: rgba(255, 255, 255, 0.5);
      }

      .goods-info-box {
        &>ul {
          list-style: none;
          width: 686px;
          margin: 0 auto;
          background: #f9f9fa;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.5);
          display: flex;
          padding: 13px 20px;
          flex-wrap: wrap;

          li {
            width: 33.33%;
          }
        }

        .goods-img-box {
          margin: 0 auto;
          display: flex;
          flex-direction: column;

          img {
            width: 100%;
          }
        }
      }

      /deep/ .el-table__header th {
        background-color: #3A3A3E !important;
        color: #fff;
      }

      /deep/ .el-table__header th:nth-child(1) {
        padding-left: 22px;
      }

      /deep/ .el-table__row {
        background: #252529;
        color: #fff;

        td {
          background: #252529;
        }

        &>td:nth-child(1) {
          padding-left: 22px;
        }
      }

      /deep/ .el-table th.is-leaf {
        border-bottom: 1px solid transparent;
      }

      /deep/ .el-table td,
      .el-table th.is-leaf {
        border-bottom: 1px dashed #666669;
      }

    }
  }

  .supply-price {
    padding: 14px 10px;
    background: #252529;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 16px;
  }

  .mouse-selected {
    border: 2px solid #f40;
  }
</style>
